<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
           <!--哪个元素要出现多次，v-for指令就添加到哪个元素上-->
           <!--(列表项，索引值),参数位置固定，名字随意。索引值可省略：v-for="item in items"-->
           <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
           </tr>

        </table>
    </div>
</body>
<script type="module">
    //导入vue模块
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    //创建应用实例
    createApp({
        data(){
            return {
                //定义数据
                //数组数据，每一个元素是一个json对象
                articleList:[
                    {
                        title:"title1",
                        category:"c1",
                        time:"t1",
                        state:'s1'
                    },
                    {
                        title:"title2",
                        category:"c2",
                        time:"t2",
                        state:'s2'
                    },
                    {
                        title:"title3",
                        category:"c3",
                        time:"t3",
                        state:'s3'
                    }
                ]
            }
        }
    }).mount('#app')//控制页面元素
</script>
</html>